<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>修改密码</title>
    <link rel="stylesheet" href="../css/page-health-orderInfo.css" />
    <link rel="stylesheet" href="../plugins/elementui/index.css" />
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="form-info">
            <div class="info-title">
                <span class="name">会员信息</span>
            </div>
            <form class="info-form">
                <div class="input-row">
                    <label>旧密码</label>
                    <input  v-model="formDate.oldPwd" type="text" class="input-clear" placeholder="请输入旧密码(初始为空)">
                </div>
                <div class="input-row">
                    <label>新密码</label>
                    <input  v-model="formDate.newPwd" type="text" class="input-clear" placeholder="请输入新密码">
                </div>
                <div class="input-row">
                    <label>确认新密码</label>
<!--                    todo 设置为密码后输入框会变小-->
                    <input  v-model="formDate.confirmPwd" type="text" class="input-clear" placeholder="再次确认密码">
                </div>

            </form>
            <div class="box-button">
                <button @click="submit()" type="button" class="btn order-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            formDate:{
                oldPwd:null,
                newPwd:null,
                confirmPwd:null,
            }


        },
        methods:{

            //提交修改
            submit() {
                if (this.formDate.confirmPwd!==this.formDate.newPwd){
                    this.$message.error("两次的密码输入不一致")
                    return
                }
                    // 保存信息了
                    //发送ajax请求，提交表单数据到后台进行业务处理
                    axios.post("/member/savePwd.do", this.formDate).then((res) => {
                        if (res.data.flag) {
                            //保存成功
                            this.$message({
                                type:"success",
                                message:res.data.message
                            })
                        } else {
                            //保存失败，提示信息
                            this.$message.error(res.data.message);
                        }
                    });

            }
        },
        mounted(){
            //发送ajax请求，根据cookie查询对应的用户信息，用于页面展示
            axios.post("/member/findMemberByCookie.do").then((res) =>{
                if(res.data.flag){
                    this.userInfo = res.data.data;
                }else {
                    //没有登录,跳转到登录页面
                    window.location.href =res.data.data;
                }
            });
        }
    });
</script>
<script>
    //日期控件
    var calendar = new datePicker();
    calendar.init({
        'trigger': '.picktime',/*按钮选择器，用于触发弹出插件*/
        'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
        'minDate': getSpecifiedDate(new Date(),1),/*最小日期*/
        'maxDate': getSpecifiedDate(new Date(),30),/*最大日期*/
        'onSubmit': function() { /*确认时触发事件*/
            //var theSelectData = calendar.value;
        },
        'onClose': function() { /*取消时触发事件*/ }
    });
</script>
</body>
</html>